<template>
  <div class="content-view">
    <div class="card">
      <h3>个人信息</h3>
      <user-card />
    </div>
    <div class="admin-fun">
      <h3>功能参数设置</h3>
      <el-form :model="data">
        <div class="form-item-row">
          <el-form-item label="终端服务操作账号设置">
            <el-select
              v-model="operName"
              filterable
              remote
              reserve-keyword
              placeholder="输入操作员姓名关键字查询"
              remote-show-suffix
              :remote-method="getOper"
              :loading="loading"
              @change="operChange"
            >
              <el-option
                v-for="item in operOptions"
                :key="item.value"
                :label="item.name"
                :value="item._id"
              />
            </el-select>
          </el-form-item>
        </div>
        <div class="form-item-row">
          <el-form-item label="终端服务升级地址">
            <el-input v-model="data.devMgtUrl" placeholder="请输入安装包下载地址" style="width: 300px;"/>
          </el-form-item>
        </div>
        <div class="form-item-row">
          <p></p>
          <el-button type="primary" plain @click="updateAdminFun">修改功能参数</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import { getCurrentInstance, onMounted, reactive, ref } from 'vue'
import UserCard from '../fun_mod/UserCard.vue'
import util from '@/assets/js/util'
import http from '@/axios/http'
import { ElNotification } from 'element-plus'
export default {
  components: {
    UserCard,
  },
  setup() {
    const Global = getCurrentInstance().proxy
    let cStatus = ref(Global.$const.STATUS_DATA);
    let af = Global.$var.adminFun || []
  //console.log(af)
    let data = reactive({
      operId: '',
      operName: '',
      devMgtUrl: '',
    })
    onMounted(()=>{
      for (let i in af) {
        if (af[i].key == 'dev_oper') {
          let v = JSON.parse(af[i].value)
          data.operId = v.id
          data.operName = v.name
          operName.value = v.name
        }
        if (af[i].key == 'dev_mgt_url') {
          data.devMgtUrl = af[i].value
        }
      }
    })
    let loading = ref(false)
    // 查询操作员信息
    let operName = ref("")
    let operOptions = ref([])
    async function getOper(query) {
      if (!util.isNull(query)) {
        let g = {};
        g.name = query
        g.status = cStatus.value[0]
        let r = await http.getOperators(g)
        loading.value = false
        if (r.code == 10000) {
          operOptions.value = r.data
        }
      } else {
        operOptions.value = []
      }
    }
    function operChange(e) {
      let o = operOptions.value
      data.operId = e
      for (let i in o) {
        if (e == o[i]._id) {
          data.operName = o[i].name
        }
      }
    }

    // 设置功能参数
    async function updateAdminFun() {
      //console.log(data)
      let _adminFun = []
      let devOper = {}
      devOper.key = 'dev_oper'
    //console.log(data.operName,data.operId)
      devOper.value = JSON.stringify({name: data.operName,id: data.operId})
      devOper.tip = '终端服务操作账号设置'
      _adminFun.push(devOper)
      let devMgtUrl = {}
      devMgtUrl.key = 'dev_mgt_url'
      devMgtUrl.value = data.devMgtUrl
      devMgtUrl.tip = '终端服务升级地址'
      _adminFun.push(devMgtUrl)
      let p = {}
      p.id = Global.$var.user.id
      p.fun = _adminFun
    //console.log(p)
      let r = await http.updateOper(p)
      if (r.code == 10000) {
        Global.$var.adminFun = p.fun
        ElNotification({
          type: 'success',
          title: '功能参数',
          message: '设置成功'
        })
      }
    }

    return{
      cStatus,data,loading,
      operName,operOptions,getOper,operChange,
      updateAdminFun
    }
  },
}
</script>

<style lang="scss" scoped >
.content-view{
  overflow-y: auto;
  padding: 0 10px;
  .card{
    width: 800px;
    margin: 30px;
    padding: 20px 30px;
    border:1px dotted #eee;
    box-shadow: 1px 1px 1px #ccc;
  }
  .admin-fun{
    width: 800px;
    margin: 30px;
    padding: 20px 30px;
    border:1px dotted #eee;
    box-shadow: 1px 1px 1px #ccc;
    .form-item-row {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      .label {
        background-color: $color-primary-away;
        // border: 1px solid $color-primary-light;
        padding: 0px 15px;
        border-radius: 1px;
      }
    }
  }
}
</style>